﻿/* -- Copyright © Microsoft Corporation. All rights reserved. */
input[type="checkbox"].toppings
{
    margin-left: 29px;
}

input[type="checkbox"].differentCheckboxColor::-ms-check
{
    color: green;
}

/* checkbox with check mark extending outside the box */
/* reset default styles */
input[type="checkbox"].styleCheckMark,
input[type="checkbox"].styleCheckMark::-ms-check,
input[type="checkbox"].styleCheckMark:hover::-ms-check,
input[type="checkbox"].styleCheckMark:active::-ms-check,
input[type="checkbox"].styleCheckMark:hover:active::-ms-check,
input[type="checkbox"].styleCheckMark:hover:active:disabled::-ms-check
{
    color: transparent;
    border: 0px;
    background-color: transparent;
    padding: 0px;
    margin: 0px;
}

/* Show a checkbox. */
input[type=checkbox].styleCheckMark 
{
    width: 30px;
    height: 30px;
    margin-bottom: -4px;    /* pull down to align with label */
    background-repeat: no-repeat;
    
    /* stack two background images to creat the grey border and white fill */
    background-position: 
            5px 12px, 
            4px 11px;
    background-size: 
            16px 16px, 
            18px 18px;
    background-image:
            linear-gradient(white, white),
            linear-gradient(rgb(204,204,204), rgb(204,204,204));
}

/* Show a custom check when checked. */
input[type=checkbox].styleCheckMark:checked::-ms-check 
{
    background-image: url("../images/check.svg");
    background-repeat: no-repeat;
    background-position: center;
}


/* like / dislike checkbox style */
/* reset default styles */
input[type="checkbox"].likeDislike,
input[type="checkbox"].likeDislike::-ms-check,
input[type="checkbox"].likeDislike:hover::-ms-check,
input[type="checkbox"].likeDislike:active::-ms-check,
input[type="checkbox"].likeDislike:hover:active::-ms-check,
input[type="checkbox"].likeDislike:hover:active:disabled::-ms-check
{
    color: transparent;
    border: 0px;
    background-color: transparent;
    padding: 0px;
    margin: 0px;
}

input[type="checkbox"].likeDislike
{
    width: 48px;
    height: 40px;
    border: 0px;
    font-family: "Segoe UI Symbol";
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

input[type="checkbox"].likeDislike:hover
{
    opacity: 0.8;
}

input[type="checkbox"].likeDislike
{
    background-image: url("../images/heartBroken.svg"); /* broken heart */
}

input[type="checkbox"].likeDislike:indeterminate
{
    background-image: url("../images/heartEmpty.svg"); /* empty heart*/
}

input[type="checkbox"].likeDislike:checked
{
    background-image: url("../images/heartFull.svg"); /* full heart*/
}